<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<head>
    <meta charset="utf-8"/>
    <title>商品详情</title>
    <%@ include file="/common/styles.jsp" %>
</head>
<body>

<s:action name="product!view" executeResult="false" namespace="/h5" var="view"/>


<div class="pg-productview f-fs2">
    <div class="u-pimgs">
        <div class="productimg owl-carousel owl-theme">
            <%--<div class="item"><img src="../images/img/p.png"></div>--%>
            <%--<div class="item"><img src="../images/img/p.png"> </div>--%>
            <%--<div class="item"><img src="../images/img/p.png"> </div>--%>
            <%--<div class="item"><img src="../images/img/p.png"> </div>--%>
            <c:set var="imgs" value="${fn:split(view.product.imgs, ',')}"></c:set>
            <c:if test="${fn:length(imgs)>0}">
                <c:forEach var="im" items="${imgs}" varStatus="status" end="10">
                    <div class="item"><img src="${im}!middle.jpg"></div>
                </c:forEach>
            </c:if>
        </div>
    </div>
    <div class="u-vinfo">
        <div class="u-tex">
            <p class="name">${view.product.name}</p>
            <span class="info">${view.product.description}</span>
            <span class="price">￥ ${view.product.price}/㎡</span>
        </div>
    </div>

    <div class="m-product-imgs">
        ${view.product.content}
    </div>
    <div class="m-commentbox">
        <div class="u-hd">
            <span>商品评价</span>
            <span class="more" data-href="${ctx}/product/productComment/${param.id}">
                查看全部
                <i class="iconfont icon-more"></i>
            </span>
        </div>
        <div class="m-commlist">

            <s:action name="product-comment!search" executeResult="false" namespace="/h5" var="productCommentList">
                <s:param name="query.order">addTime</s:param>
                <s:param name="query.desc">true</s:param>
                <s:param name="query.productId">${view.product.id}</s:param>
                <s:param name="query.enabled">true</s:param>
                <s:param name="query.pagesize">3</s:param>
            </s:action>

            <c:if test="${empty productCommentList.productComments}">
                <div class="m-nothing" style="margin-top: 5px;">
                    <i class="iconfont icon-information"></i>
                    <p>没有评价哦</p>
                </div>
            </c:if>
            <s:iterator value="%{#productCommentList.productComments}" var="productComment" status="rowStatus">
                <div class="u-item">
                    <div class="u-ath">
                        <img src="${productComment.user.photo}!icon.jpg">
                        <span class="name">${productComment.user.nickname}</span>
                        <span class="data"><s:date name="%{#productComment.addTime}" format="yyyy-MM-dd"/></span>
                    </div>
                    <div class="u-text">
                        <p class="info">${productComment.content}</p>
                        <div class="imgs f-cb">
                            <c:if test="${productComment.imgs!=null && productComment.imgs!=''}">
                                <c:set var="productImgs" value="${fn:split(productComment.imgs, ',')}"></c:set>
                                <c:if test="${fn:length(productImgs)>0}">
                                    <c:forEach var="im" items="${productImgs}" varStatus="status" end="10">
                                        <span  onclick="openImg('${im}')" style="background-image:url('${im}!icon.jpg')"></span>
                                    </c:forEach>
                                </c:if>
                            </c:if>
                        </div>
                        <p class="size">数量：${productComment.orderItem.quantity}</p>
                    </div>
                </div>
            </s:iterator>

        </div>
    </div>
</div>

<%@ include file="/common/scripts.jsp" %>
<%@ include file="/common/script/owlScript.jsp" %>

<script type="text/javascript">
    //商品图片切换
    $(document).ready(function () {
        $(".productimg").owlCarousel({items: 1, responsiveClass: true});
    });

    function openImg(url) {
        var _htm = '<img style="width:100%;" src="' + url + '"/>'
        layer.open({
            style: 'background:none',
            content: _htm
        })
    }
</script>
</body>

</html>
